<template>
		<el-container>
			<!-- 侧边栏 -->
		  <el-aside :width="isWidth">
				<div class="logo" v-show="!isCollapse"></div>
				<!-- 侧边菜单 -->
				<el-menu
					:default-active="activePath"
					background-color="#002033"
					text-color="#fff"
					active-text-color="#ffd04b"
					router
					:collapse="isCollapse"
					:collapse-transition="false">
					<el-menu-item :index="menu.path" v-for="(menu, i) in menuListData" :key="i" @click="savePath(menu.path)">
						<i :class="iconsObj[menu.id]"></i>
						<span slot="title">{{menu.name}}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
		  <el-container>
				<!-- 头部 -->
		    <el-header>
					<div class="header-wrapper">
						<div class="left">
							<i class="iconfont icon-28-Navigationfrieslistmenuoptionsstack" @click="collapse"></i>
							<span>江苏传智播客科技教育有限公司</span>
						</div>
						<div class="right">
							<el-dropdown>
								<span class="userInfo">
									<img :src="userInfo.photo" class="user-pic">
									<span>{{userInfo.name}}</span>
									<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item icon="el-icon-setting">个人设置</el-dropdown-item>
									<el-dropdown-item icon="el-icon-lock" @click.native="logout">退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
				</el-header>
		    <el-main>
					<!-- 子路由出口 -->
					<router-view />
				</el-main>
		  </el-container>
		</el-container>
</template>

<script>
	// 公交总线
	import bus from '@/utils/eventBus.js'
	import { getMenuList } from '@/api/menu.js'
	import { getUserInfo } from '@/api/user.js'
	export default {
		name: 'layout',
		data () {
			return {
				menuListData: [],
				iconsObj: {
					0: 'iconfont icon-home',
					1: 'iconfont icon-neirong',
					2: 'iconfont icon-tupian',
					3: 'iconfont icon-Release',
					4: 'iconfont icon-pinglun',
					5: 'iconfont icon-liwu',
					6: 'iconfont icon-shezhi'
				},
				// 用户信息
				userInfo: {},
				// 折叠菜单
				isCollapse: false,
				// 侧边栏宽度
				isWidth: '200px',
				// 当前路由
				activePath: '/home'
			}
		},
		created () {
			this._getMenuList()
			this._loadUserInfo()

			if (window.sessionStorage.getItem('activePath')) {
				this.activePath = window.sessionStorage.getItem('activePath')
			}

			// 注册事件
			bus.$on('updateInfo', () => {
				this._loadUserInfo()
			})
		},
		methods: {
			// 获取菜单列表
			_getMenuList () {
				getMenuList().then(res => {
					this.menuListData = res.data
				}).catch((err) => {
					this.$message('获取菜单失败：' + err)
				})
			},
			// 加载用户信息
			_loadUserInfo () {
				getUserInfo().then(({ data: res }) => {
					this.userInfo = res.data
				})
			},
			// 菜单折叠
			collapse () {
				this.isCollapse = !this.isCollapse
				this.isCollapse ? this.isWidth = '64px' : this.isWidth = '200px'
			},
			// 保存当前路由路径
			savePath (activePath) {
				this.activePath = activePath
				window.sessionStorage.setItem('activePath', activePath)
			},
			// 退出登录
			async logout () {
				const confirmResult = await this.$confirm('是否退出登录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)

				if (confirmResult !== 'confirm') return this.$message.info('你点击了取消按钮！')

				window.sessionStorage.clear()
				this.$router.push('/login')
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-container{
		.el-aside{
			background: #002033;
			.logo{
				width: 100%;
				height: 60px;
				background: url(images/logo_admin.png) no-repeat center center;
				background-size: 140px 35px;
			}
			.el-menu{
				border-right: none;
				.iconfont{
					margin-right: 10px;
				}
			}
		}
		.el-header{
			border-bottom: 1px solid #ddd;
			.header-wrapper{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					.iconfont{
						font-size: 20px;
						cursor: pointer;
					}
					span{
						font-size: 18px;
						margin-left: 8px;
						vertical-align: 1px;
					}
				}
				.right{
					.userInfo{
						.user-pic{
							width: 30px;
							height: 30px;
							margin-right: 5px;
						}
						span{
							vertical-align: -2px;
						}
						i{
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
</style>
